<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        #box1 {
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
        }

        #box2 {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

        #box3 {
            width: 150px;
            height: 150px;
            background-color: skyblue;
        }

    </style>

    <script type="text/javascript">

		/**
		 * 事件的传播-实践案例
		 */

		window.onload = function () {
            /*
             * 分别为三个div绑定单击响应函数
             */
            var box1 = document.getElementById("box1");
            var box2 = document.getElementById("box2");
            var box3 = document.getElementById("box3");

            /*
             * 事件的传播
             * 	- 关于事件的传播网景公司和微软公司有不同的理解
             * 	- 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，
             * 		然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
             *  - (已倒闭)网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，
             * 		然后在向内传播给后代元素
             * 	- W3C综合了两个公司的方案，将事件传播分成了三个阶段
             * 		1.捕获阶段
             * 			- 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
             * 		2.目标阶段
             * 			- 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
             * 		3.冒泡阶段
             * 			- 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
             *
             * 		- 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
             * 			一般情况下不会希望在捕获阶段触发事件，所以这个参数一般都是false
             *
             * 	- IE8及以下的浏览器中没有捕获阶段
             */

            bind(box1, "click", function () {
                alert("我是box1的响应函数")
            });

            bind(box2, "click", function () {
                alert("我是box2的响应函数")
            });

            bind(box3, "click", function () {
                alert("我是box3的响应函数")
            });

        };


		/**
		 * 事件的绑定，实现在捕获阶段触发事件
		 * @param obj
		 * @param eventStr
		 * @param callback
		 */
        function bind(obj, eventStr, callback) {
            if (obj.addEventListener) {
                //大部分浏览器兼容的方式
                obj.addEventListener(eventStr, callback, true);
            } else {
                /*
                 * this是谁由调用方式决定
                 * callback.call(obj)
                 */
                //IE8及以下
                obj.attachEvent("on" + eventStr, function () {
                    //在匿名函数中调用回调函数
                    callback.call(obj);
                });
            }
        }

    </script>
</head>

<body>

<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>

</body>
</html>
